<template>
  <div class="live-container">
    <div class="live-top" @click="toLive">
      <img style="width: 100%; border-radius: 10px;" src="../../assets/icons/liveCover.png" alt="">
      <div class="inter-live">点击进入直播</div>
    </div>
    <div class="live-info">
      <div class="live-info-left">
        <div class="live-info-left-title">
          <b>小兵良品的直播间</b>
          temolate
          <div @click="onClick" class="live-info-left-title-follow">
            {{ isFollow ? '已关注' : '+关注' }}
          </div>
        </div>
        <div class="live-info-left-heat">
          <img style="width: 20px;" src="../../assets/icons/redu.png">
          <div>4347.08万 热度 42.83万人在线</div>
        </div>
      </div>
      <div>
        <img style="width: 50px; height: 50px; border-radius: 100px;object-fit: cover;"
          src="../../assets/icons/liveCover.png">
      </div>
    </div>
    <div class="live-introduce">
      <div class="live-introduce-title">直播介绍</div>
      <p class="live-introduce-content">
        小兵良品&reg; 由山东籍退伍老兵创立，本着"良心良品，至诚至信"的发展理念，集合几百家优质生产工厂资源，减少层层经销商直达消费者，是一个综合社区服务同时给大众带来实惠的社区团购平台。
      </p>
    </div>
    <div class="live-evaluate">
      <div class="live-evaluate-title">用户评价</div>
      <div class="live-evaluate-user">
        <img style="width: 50px; height: 50px; border-radius: 100px; object-fit: cover;"
          src="../../assets/my/avatar.png">
        <div>
          <div class="live-evaluate-user-name"> 花卉*** </div>
          <div class="live-evaluate-user-location"> 山东/济南 </div>
        </div>
      </div>
      <div class="live-evaluate-content">
        小兵良品&reg; 由山东籍退伍老兵创立，本着"良心良品，至诚至信"的发展理念，集合几百家优质生产工厂资源，减少层层经销商直达消费者，是一个综合社区服务同时给大众带来实惠的社区团购平台。
      </div>
    </div>
  </div>
</template>

<script setup name="home">
import { useRouter } from 'vue-router'
const router = useRouter()
const isFollow = ref(false)


function onClick() {
  isFollow.value = !isFollow.value
}
function toLive() {
  router.push('/live?liveId=255542440519573504')
}
</script>

<style lang="scss" scoped>
.live-container {
  margin: 0 15px;
  font-size: 16px;

  .live-top {
    position: relative;

    .inter-live {
      position: absolute;
      bottom: 10px;
      left: 50%;
      transform: translateX(-50%);
      background-color: rgba(0, 0, 0, .6);
      color: #fff;
      border-radius: 10px;
      font-size: 14px;
      width: 60%;
      text-align: center;
      padding: 5px;
    }
  }

  .live-info {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .live-info-left {
      display: flex;
      flex-direction: column;
      gap: 5px;

      .live-info-left-title {
        display: flex;
        align-items: center;

        .live-info-left-title-follow {
          background-color: #de868f;
          color: #fff;
          padding: 5px 10px;
          font-size: 12px;
          font-weight: 700;
          border-radius: 100px;
          margin-left: 10px;
        }
      }

      .live-info-left-heat {
        display: flex;
        align-items: center;
        gap: 5px;
        color: #494747;
      }
    }
  }

  .live-introduce {
    margin-top: 20px;

    .live-introduce-title {
      font-size: 16px;
      font-weight: 700;
      color: #3fccdf;
    }

    .live-introduce-content {
      text-indent: 2em;
      margin-top: 10px;
      line-height: 1.5;
    }
  }

  .live-evaluate {
    margin-top: 20px;

    .live-evaluate-title {
      font-size: 16px;
      font-weight: 700;
      color: #3fccdf;
    }

    .live-evaluate-user {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: 10px;

      .live-evaluate-user-name {
        font-weight: 700;
      }

      .live-evaluate-user-location {
        color: #494747;
      }
    }

    .live-evaluate-content {
      text-indent: 2em;
      margin-top: 10px;
      line-height: 1.5;
    }
  }
}
</style>